<template>
  <div>
    <div class="mainCon">
      <div class="containercontent">
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              课程名称
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-input v-model="searchName" size="mini" placeholder="课程名称" @keyup.enter.native="readTrainList(trainQuery,'search')"></el-input>
            </div>
          </div>
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">
              课程类别
            </div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-select size="mini" v-model="trainValue" @change="readTrainList(trainQuery,'search')">
                <el-option v-for="item in trainSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="inlineblock basicRightDistanceA searchIcon">
            <el-button size="mini" @click="readTrainList(trainQuery,'search')">搜索</el-button>
            <el-button size="mini" @click="emptySearch">清空</el-button>
          </div>

        </div>
        <div class="separaterowTable">
          <div class="tableTittle">
            <div><span class="fontImpact">1</span><span>培训管理</span></div>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="newTrain" style="float:right" v-if="userOpernation.add.display">添加培训记录</el-button>
          </div>
          <el-table :data="peixunguanliTable" style="width: 100%" class="tableCon" size="mini">
            <!-- kechengfenlei:'管理类',
                    kechengming:'实验室认可知识培训',
                    kaishishijian:'2018-01-01',
                    jieshushijian:'2018-02-01',
                    neironggaiyao:'培训内容概要',
                    kejian:'培训PPT.ppt，课程讲义.pdf',
                    peixunfangshi:'内训/外训',
                    peixunjiangshi:'讲师名',
                    peixundidian:'xxxx楼x楼x号会议室',
                    peixunshichang:'2小时',
                    jifenxishu:'1',
                    peixunrenshu:'12',
                    canyurenyuan:'人员1，人员2，人员3，……' -->
            <el-table-column label="序号" min-width="50px" fixed>
              <template slot-scope="scope">
                {{scope.$index+(trainQuery.page - 1) * trainQuery.pageCount + 1}}
              </template>
            </el-table-column>
            <el-table-column property="name" label="课程名称" fixed min-width="120px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="courseType" label="课程类别" :formatter="trainFormatter" min-width="100px" show-overflow-tooltip>
            </el-table-column>

            <el-table-column property="startDate" label="开始时间" :formatter="formatterDate" min-width="100px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="endDate" label="结束时间" :formatter="formatterDate" min-width="100px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="trainWay" label="方式" min-width="100px" show-overflow-tooltip>
            </el-table-column>
            <!--<el-table-column property="trainMan" label="讲师" min-width="100px" show-overflow-tooltip>
            </el-table-column>-->
            <!--<el-table-column property="trainPlace" label="地点" min-width="100px" show-overflow-tooltip>
            </el-table-column>-->
            <el-table-column property="trainTime" label="时长(h)" min-width="80px">
            </el-table-column>
            <!--<el-table-column property="leaderboard" label="积分" min-width="80px">
            </el-table-column>-->
            <el-table-column property="count" label="人数" min-width="80px">
            </el-table-column>
            <!--<el-table-column property="attachment" label="课件" min-width="100px">
              <template slot-scope='scope'>
                <el-button type="text" size="mini">下载</el-button>
              </template>
            </el-table-column>-->
            <el-table-column label="操作" min-width="150px">
              <template slot-scope="scope">
                <el-button @click="editTrain(scope.row,'edit')" type="text" size="mini" v-if="userOpernation.update.display">编辑</el-button>
                <el-button @click="editTrain(scope.row,'look')" type="text" size="mini" v-if="userOpernation.select.display">详情</el-button>
                <el-button type="text" size="mini" @click="deleteTrain(scope.row)" v-if="userOpernation.delete.display">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block changepages">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="trainQuery.page" :page-sizes="[20,30,40]"
              :page-size="trainQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <div class="trainDialog" v-if="userDetailShow">
      <div class="twoStageWindow">
        <div class="twoStageWindowTitle">
          {{newOrEdit=='new'?'新增':(newOrEdit=='edit'?'编辑':'查看')}}培训记录
          <div class="twoStageWindowClose">
            <el-button size="mini" type="primary" @click="submitTrain" :disabled="!isRepeat" v-if="newOrEdit != 'look'">保存</el-button>
            <el-button size="mini" @click="close('trainForm')">取消</el-button>
          </div>
        </div>
        <div class="containercontent" style="margin-top:40px;height:calc(100% - 40px);padding-top: 0;">
          <div class="form">
            <el-form label-width="110px" :inline="false" class="demo-form-inline" :model="trainForm" :rules="trainRules" ref="trainForm">
              <el-form-item label="课程名称" prop='name'>
                <el-col :span="22">
                  <el-input size="mini" placeholder="名称" v-model="trainForm.name" :disabled="!canEdit"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="课程类别" prop='courseType'>
                <el-col :span="22">
                  <!--<el-input size="mini" placeholder="地址" v-model="trainForm.courseType" ></el-input>-->
                  <el-select v-model="trainForm.courseType" size="mini" style="width:100%;" :disabled="!canEdit">
                    <el-option v-for="item in trainSelect.itemList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="开始时间" prop='startDate'>
                <el-col :span="22">
                  <el-date-picker v-model="trainForm.startDate" type="date" size="mini" style="width:100%;" :disabled="!canEdit" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd" @change="datePicker" placeholder="选择日期">
                  </el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="结束时间" prop='endDate'>
                <el-col :span="22">
                  <el-date-picker v-model="trainForm.endDate" type="date" size="mini" style="width:100%;" :disabled="!canEdit" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd" :picker-options="pickerOptions" placeholder="选择日期" @change="trainForm.examDate = ''">
                  </el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="培训方式" prop='trainWay'>
                <el-col :span="22">
                  <el-select v-model="trainForm.trainWay" size="mini" style="width:100%;" :disabled="!canEdit">
                    <el-option v-for="item in trainWays" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <!--<el-input size="mini" placeholder="方式" v-model="trainForm.trainWay" :disabled="!canEdit"></el-input>-->
                </el-col>
              </el-form-item>
              <el-form-item label="讲师" prop='trainMan'>
                <el-col :span="22">
                  <el-input size="mini" placeholder="讲师" v-model="trainForm.trainMan" :disabled="!canEdit"></el-input>
                </el-col>
              </el-form-item>
              <!--examDate-->
              <el-form-item label="考核时间" prop='examDate'>
                <el-col :span="22">
                  <el-date-picker v-model="trainForm.examDate" type="date" size="mini" style="width:100%;" :disabled="!canEdit" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd" :picker-options="pickerOptions1" placeholder="选择日期">
                  </el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="学习方式" prop='examWay'>
                <el-col :span="22">
                  <el-select v-model="trainForm.examWay" size="mini" style="width:100%;" :disabled="!canEdit">
                    <el-option v-for="item in examWays" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <!--<el-input size="mini" placeholder="方式" v-model="trainForm.trainWay" :disabled="!canEdit"></el-input>-->
                </el-col>
              </el-form-item>
              <el-form-item label="地点" prop='trainPlace'>
                <el-col :span="22">
                  <el-input size="mini" placeholder="地点" v-model="trainForm.trainPlace" :disabled="!canEdit"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="时长(h)" prop='trainTime'>
                <el-col :span="22">
                  <el-input  class = "deal" oninput="this.value=this.value.replace(/[^0-9.]+/,'');"  size="mini" placeholder="时长" v-model="trainForm.trainTime" :disabled="!canEdit"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="积分" prop='leaderboard'>
                <el-col :span="22">
                  <el-input  class = "deal" oninput="this.value=this.value.replace(/[^0-9.]+/,'');" size="mini" placeholder="积分" v-model="trainForm.leaderboard" :disabled="!canEdit"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="人数" prop='count'>
                <el-col :span="22">
                  <el-input  class = "deal" oninput="this.value=this.value.replace(/[^0-9]+/,'');" size="mini" placeholder="人数" v-model="trainForm.count" disabled></el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </div>
          <div class="elTab">
            <el-tabs style="width:100%;">
              <el-tab-pane label="参与人员">
                <div class="inlineblock verticalmiddle width100">
                  <el-button type="primary" size="mini" @click="addUser" v-if="newOrEdit=='edit' || newOrEdit=='new'" style="float:right;margin-bottom:5px">添加人员</el-button>
                  <el-table :data="trainForm.cList" style="width: 100%;height:calc(100% - 33px)" class="tableCon" size="mini">
                    <el-table-column label="序号"  min-width="50px">
                      <template slot-scope="scope">
                        {{scope.$index+1}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="名字" min-width="180"></el-table-column>
                    <el-table-column prop="user" label="用户名" min-width="180"></el-table-column>
                    <el-table-column prop="result" label="考核结果" min-width="180">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.result" size="mini" :disabled="!canEdit">
                          <el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                          <!--<el-option key="0" label="不通过" value=0>
                          </el-option>
                          <el-option key="1" label="通过" value=1>
                          </el-option>-->
                        </el-select>
                      </template>
                    </el-table-column>

                    <el-table-column label="操作" min-width="100px" property="name" v-if="newOrEdit != 'look' && userOpernation.delete.display">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" placeholder="请输入内容" @click="deleteUser(scope.$index)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="课件">
                <div class="inlineblock verticalmiddle width100">
                  <form style='visibility: hidden;width: 0;height: 0;'>
                    <input type="file" name="file" id="train-file" @change="getFile" multiple="multiple">
                  </form>
                  <el-button @click="uploadClick" type="primary" size="mini" style="float:right;margin-bottom:5px" v-if="newOrEdit != 'look' && userOpernation.upload.display">上传</el-button>
                  <el-table :data="trainForm.files" style="width: 100%" size="mini" class="tableCon" height="calc(100% - 33px)">
                    <el-table-column label="序号" min-width="50px">
                      <template slot-scope="scope">
                        {{scope.$index+1}}
                      </template>
                    </el-table-column>
                    <el-table-column property="fileName" label="附件名称" min-width="200px" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="状态" min-width="200px" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        {{scope.row.id == undefined ? "待上传" : "已上传"}}
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="100px">
                      <template slot-scope="scope">

                        <!--如果师新增的话 切割掉一行 编辑的话掉接口删除一行-->
                        <el-button type="text" size="mini" @click="deleteFileNew(scope.$index)" v-if="scope.row.id == undefined && userOpernation.delete.display">删除</el-button>
                        <el-button type="text" size="mini" @click="deleteFileEdit(scope.row,scope.$index)" v-if="scope.row.id != undefined && newOrEdit != 'look'  && userOpernation.delete.display">删除</el-button>
                        <el-button type="text" size="mini" @click="downloadattachment(scope.row)" v-if="scope.row.id != undefined && userOpernation.upload.display">下载</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <!--<el-tab-pane label="附件">
                <div class="inlineblock verticalmiddle width100">
                  <form style='visibility: hidden;width: 0;height: 0;'>
                    <input type="file" name="file" id="train-file" @change="getFile" multiple="multiple">
                  </form>
                  <el-button @click="uploadClick" type="primary" size="mini" style="float:right;margin-bottom:5px" v-if="newOrEdit != 'look'">上传</el-button>
                  <el-table :data="trainForm.files" style="width: 100%" size="mini" class="tableCon" height="calc(100% - 33px)">
                    <el-table-column label="序号" min-width="50px">
                      <template slot-scope="scope">
                        {{scope.$index+1}}
                      </template>
                    </el-table-column>
                    <el-table-column property="fileName" label="附件名称" min-width="200px" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column  label="状态" min-width="200px" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            {{scope.row.id == undefined ? "待上传" : "已上传"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="100px">
                      <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="deleteFileNew(scope.$index)" v-if="scope.row.id == undefined">删除</el-button>
                        <el-button type="text" size="mini" @click="deleteFileEdit(scope.row,scope.$index)" v-if="scope.row.id != undefined && newOrEdit != 'look'">删除</el-button>
                        <el-button type="text" size="mini" @click="downloadattachment(scope.row)" v-if="scope.row.id != undefined">下载</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>-->
            </el-tabs>
          </div>
        </div>
        <div slot="footer" class="user-footer" v-if="newOrEdit == 'look'">
          <span v-if="trainForm.createBy != undefined">
              创建人:{{trainForm.createBy}} 
            </span>
          <span v-if="trainForm.createTime != undefined">
              创建时间:{{trainForm.createTime}} 
            </span>
          <span v-if="trainForm.updateBy != undefined">
              修改人：{{trainForm.updateBy}} 
            </span>
          <span v-if="trainForm.updateTime != undefined">
              修改时间：{{trainForm.updateTime}} 
            </span>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="userAddShow" width="55%" :show-close='false' :closeOnClickModal='false' class="userAddForm" ref="userAddForm">
      <span slot="title" class="dialog-title">
          选择人员
          <el-button @click="closeuserAdd" size="mini" class="popupClose">关闭</el-button>
        </span>
      <div class="penalrow selectw100 form">
        <div class=" width100 ">
          <div class="inlineblock verticalmiddle">
            课程名称
          </div>
          <div class="inlineblock verticalmiddle informationItem">
            <el-input size="mini" placeholder="课程名称" v-model="trainForm.name" disabled></el-input>
          </div>

        </div>
      </div>
      <div style="width:100%;float:right;" class="useritem">
        <div class="seachTip selectw100">
          <div class="inlineblock verticalmiddle infoitem">
            <div class="inlineblock verticalmiddle">人员名称</div>
            <div class="inlineblock verticalmiddle informationItem">
              <el-input v-model="userName" size="mini" placeholder="人员名称" @keyup.enter.native="readUser"></el-input>
            </div>
          </div>
          <div class="inlineblock basicRightDistanceA searchIcon">
            <el-button size="mini" icon="el-icon-search" @click="readUser"></el-button>
          </div>
        </div>
        <el-table :data="userData" size="mini"  style="width: 100%;" height = "calc(100% - 50px)"  @selection-change="handleSelectionChange"
          ref="multipleTable">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="名字" min-width="180"></el-table-column>
          <el-table-column prop="account" label="用户名" min-width="180"></el-table-column>

        </el-table>

      </div>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="subUser" size="mini">添加人员</el-button>
          <el-button  size="mini" @click="closeuserAdd">取 消</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  import { mapState } from 'vuex'


  export default {
    data() {
      
      var that = this;
      var checkCount = (rule, value, callback) => {
      //  
          var reg = /^[0-9]*$/;
          if (!reg.test(value)) {
            callback(new Error('请输入整数'));
          }
      };
      return {
        trainValue: '', //搜索框课程类别
        searchName: '', //搜索框名称
        trainQuery: {
          page: 1, //第几页
          pageCount: 20, //页面得记录条数，
        },
        rowNumber: 0, //数据总条数
        peixunguanliTable: [], //培训列表数据
        userDetailShow: false, //添加弹框
        newOrEdit: 'new', //是编辑还是新增
        canEdit: true, //是否可编辑
        trainForm: { //添加和编辑的表单
          name: '',
          departmentName: '',
          courseType: '',
          startDate: '',
          endDate: '',
          trainWay: '',
          trainMan: '',
          trainPlace: '',
          trainTime: null,
          leaderboard: null,
          count: null,
          attachment: '',
          cList: [],
          files: [],
          examDate: "",
          examWay: "",
        },
        trainRules: { //表单验证规则
          name: [{ required: true, type: 'string', message: '请填写名称', trigger: 'blur' },],
          // count:[{ validator: checkCount, trigger: 'blur' }]
        },
        trainWays: [{
          label: "内训",
          value: '内训',
        }, {
          label: "外训",
          value: '外训',
        }],
        examWays: [{
          label: "理论",
          value: '0',
        }, {
          label: "实操",
          value: '1',
        }, {
          label: "理论与实操结合",
          value: '2',
        },],
        userAddShow: false, //添加人员弹框
        userData: [], //用户数据
        userName: '', //弹框中人员搜索
        // 截至日期不能选择发布日期之前的日期
        pickerOptions: {
          disabledDate(time) {
            if (that.trainForm.startDate != '') {
              let startDate = new Date(that.trainForm.startDate);
              return time.getTime() < startDate.getTime() - 8.64e7;
            }

          }
        },
        pickerOptions1: {
          disabledDate(time) {
            if (that.trainForm.endDate != '') {
              let endDate = new Date(that.trainForm.endDate);
              return time.getTime() < endDate.getTime() - 8.64e7;
            }

          }
        },
        selectUser: [], //被勾选的人员
        isRepeat: true,
        resultOptions:[{
          value:0,
          label:"不通过",
        },{
          value:1,
          label:"通过",
        }],
      }
    },
    components: {
    },
    props: ["userOpernation"],
    computed: {
      ...mapState(['enableStatus', 'trainSelect', 'typeofAbilityTableDate',]),
    },
    created() {
      this.$store.dispatch('dogetDictionary');
      this.readTrainList(this.trainQuery)
    },
    mounted(){
      
    },
    watch: {
      trainQuery: {
        handler(val, oldVal) {
          this.readTrainList(this.trainQuery)
        },
        deep: true
      },
      
    },
    methods: {
      emptySearch() {
        this.searchName = '';
        this.trainValue = '';
        this.readTrainList(this.trainQuery, 'search')
      },
      //  选中发布时间时 重置截至时间 防止截至时间再发布时间之前
      datePicker() {
        this.trainForm.endDate = ''
      },
      trainFormatter(row, column, cellValue, index) {
        return this.util.codeChangeName({ cellValue: cellValue, list: this.trainSelect.itemList })
      },
      // 读取培训课程列表
      readTrainList(parp, search) {
        var params = {
          name: this.searchName,
          courseType: this.trainValue,
        }
        if (search != undefined) {
          this.trainQuery.page = 1;
          params.page = 1;
          params.pageCount = parp.pageCount;
        } else {
          params.page = parp.page;
          params.pageCount = parp.pageCount;
        }
        this.$http({
          method: 'post',
          apiUrl: '/resource/readTrainList.htm',
          params: params,
          isJson: true,
        }).then(res => {
          if (res.code === 0) {

            this.peixunguanliTable = res.data;
            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }

        })
      },
      // 处理时间
      formatterDate(row, column, cellValue) {
        return this.util.formatterDate({ cellValue: cellValue })
      },
      // 添加培训记录
      newTrain() {
        this.userDetailShow = true;
        this.canEdit = true;
        this.newOrEdit = 'new';
        
      },
      // 编辑培训记录
      editTrain: function (row, newOrEdit) {
        this.userDetailShow = true;
        
        this.newOrEdit = newOrEdit;
        if (newOrEdit == "edit") {
          this.canEdit = true;
        } else {
          this.canEdit = false;
        }
        this.$http({
          method: 'post',
          apiUrl: '/resource/readTrain.htm',
          params: { id: row.id },
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            for (var i in res.data) {
              this.trainForm[i] = res.data[i];
            }
            this.trainForm.files = this.trainForm.fileList;
          }
        })
      },
      // 提交添加和保存
      submitTrain(trainForm) {
        this.$refs.trainForm.validate((valid) => { //表单验证
          if (valid) {
            if(this.trainForm.cList.length == 0){
              this.$notify({
                  type:'warning',
                  message:"请加入参加人员",
                  title:"警告",
              })
              return;
            }
            var formData = new FormData();
            for (var i in this.trainForm.files) {
              formData.append("files", this.trainForm.files[i])
            }
            var data = {
              cList: this.trainForm.cList,
              name: this.trainForm.name,
              courseType: this.trainForm.courseType,
              departmentName: this.trainForm.departmentName,
              startDate: this.trainForm.startDate,
              endDate: this.trainForm.endDate,
              trainWay: this.trainForm.trainWay,
              trainMan: this.trainForm.trainMan,
              trainPlace: this.trainForm.trainPlace,
              trainTime: this.trainForm.trainTime,
              leaderboard: this.trainForm.leaderboard,
              count: this.trainForm.count,
              examDate: this.trainForm.examDate,
              examWay: this.trainForm.examWay,
            }
            if(data.trainTime == ""){
              data.trainTime = null
            }
            if(data.leaderboard == ""){
              data.leaderboard = null
            }

           
            if (this.newOrEdit == 'new') {
              var url = '/resource/creatTrain.htm';
            } else {
              var url = '/resource/updateTrain.htm';
              // formData.append("id",this.trainForm.id)
              data.id = this.trainForm.id;
            }
            formData.append("data", JSON.stringify(data));
            this.isRepeat = false;
            this.$http({
              method: 'post',
              apiUrl: url,
              params: formData,
              headers: { 'Content-Type': 'multipart/form-data' }
            }).then(res => {
              this.isRepeat = true;
              if (res.code == 0) {
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                });
                this.close('trainForm');
                this.readTrainList(this.trainQuery);
              }

            }).catch(() => {

            });

          } else {
            return false;
          }
        });
      },
      // 关闭添加和编辑
      close(formName) {
        this.$refs[formName].resetFields();
        this.userDetailShow = false;
        this.trainForm = { //清空表单
          name: '',
          courseType: '',
          departmentName: '',
          startDate: '',
          endDate: '',
          trainWay: '',
          trainMan: '',
          trainPlace: '',
          trainTime: null,
          leaderboard: null,
          count: null,
          attachment: '',
          cList: [],
          files: [],
          examDate: "",
          examWay: "",
        };
        this.isRepeat = true;
      },
      //删除培训记录
      deleteTrain(row) {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            apiUrl: '/resource/deleteTrain.htm',
            params: {
              id: row.id,
            },
            isJson: false,
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.readTrainList(this.trainQuery)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 添加人员弹框弹出 
      addUser() {
        this.userAddShow = true;
        this.readUser();


      },
      // 调用读取人员接口
      readUser() {
        this.userData = [];
        this.$http({
          method: 'post',
          apiUrl: '/resource/readEmployeeByLab.htm',
          params: { name: this.userName },
          isJson: true,
        }).then(res => {
          if (res.code === 0) {

            for(var i in  res.data){
              if(!res.data[i].disabled){
                this.userData.push(res.data[i])
              }
            }
          }

        })
      },
      handleSelectionChange(val) {
        this.selectUser = val
      },
      // 
      subUser() {
        for (var i = 0; i < this.selectUser.length; i++) {
          //转换属性
          this.selectUser[i].userName = this.selectUser[i].name;
          this.selectUser[i].user = this.selectUser[i].account;
          this.$set(this.selectUser[i],'result',1)

        }
        this.trainForm.cList = this.util.repeatData({ old: this.trainForm.cList, new: this.selectUser, unique: 'user' })
        this.trainForm.count = this.trainForm.cList.length;
        this.toggleSelection();
        this.userAddShow = false;
      },
      uploadClick() { //上传
        document.getElementById("train-file").click()
      },
      getFile(event) {   //上传 把文件加入到files数组（必须循环）

        for (var i = 0; i < event.target.files.length; i++) {
          event.target.files[i].fileName = event.target.files[i].name
          this.trainForm.files.push(event.target.files[i])
        }
        event.target.value= "";
      },
      // 下载附件
      downloadattachment(row) {
        var url = "/download/fileDownload.htm"
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
        window.open(process.env.baseUrl + url + '?id=' + row.id + "&token=" + token);
      },
      deleteFileNew(index) {
        this.trainForm.files.splice(index, 1);
        
      },
      deleteFileEdit(row, index) {  //如果
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            apiUrl: '/download/fileDelete.htm',
            params: {
              id: row.id,
            },
            isJson: false,
          }).then(res => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.trainForm.files.splice(index, 1)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 清空选中数据
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      // 删除已经选择的用户
      deleteUser(index) {
        this.trainForm.cList.splice(index, 1);
        this.trainForm.count = this.trainForm.cList.length;
      },
      // 关闭选择人员弹框
      closeuserAdd() {
        this.userAddShow = false;
        this.toggleSelection();
      },
      handleSizeChange: function (val) {
        this.trainQuery.pageCount = val;
      },
      handleCurrentChange: function (val) {
        this.trainQuery.page = val;
      },

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .infoitem {
    width: calc(100%/3);
    padding: 0;
    margin-right: 5px;
  }


  .informationItem {
    width: calc(100% - 78px);
    float: none;
    margin-left: 8px;
  }
</style>
<style>
  .trainDialog .el-dialog {
    height: 70%;
  }

  .trainDialog .el-form-item {
    width: 49%;
    display: inline-block;
    margin-bottom: 4px;
  }

  .trainDialog .form {
    height: 275px;
  }

  .trainDialog .elTab {
    height: calc(100% - 275px);
    padding: 0 20px;
  }

  .trainDialog .el-tabs,
  .trainDialog .el-tabs .el-tab-pane,
  .trainDialog .el-tabs .el-tab-pane .verticalmiddle {
    height: 100%;
  }

  .trainDialog .el-tabs .el-tabs__content {
    height: calc(100% - 55px)
  }

  .trainDialog .el-tabs .el-tabs__header {
    margin: 0 0 10px;
  }

  .trainDialog .el-tabs .el-tab-pane .el-table {
    height: calc(100% - 33px);
    overflow-y: auto;
  }

  .trainDialog .el-table .el-table__fixed-right-patch {
    display: none;
  }

  .trainDialog .el-dialog .el-dialog__footer .user-footer {
    height: 45px;
    line-height: 45px;
  }

  .userAddForm .el-dialog {
    height: 70%;
  }

  .userAddForm .el-dialog .el-form-item {
    margin-bottom: 20px;
  }

  .userAddForm .el-dialog .el-dialog__body {
    height: calc(100% - 85px);
    padding: 10px;
  }

  .userAddForm .el-dialog .el-dialog__body .form {
    height: 50px;
  }

  .userAddForm .el-dialog .el-dialog__body .useritem {
    height: calc(100% - 50px);
    padding: 0 15px;
  }

  .userAddForm .el-dialog .el-dialog__footer {
    height: 45px;
    line-height: 45px;
    padding: 0 20px !important;
  }

  .useritem .separaterowTable .tableCon {
    height: 100%;
  }

  .useritem .seachTip {
    height: 50px;
  }
  .useritem .el-table td, .el-table th{
    padding:6px 0;
  }
</style>